<!-- 年规 - 团建规划 - 新增/编辑 -->
<template>
  <view>
    <view class="mt-4 px-3.75">
      <u-form :form="formData" label-width="188">
        <view class="card-grey">
          <u-form-item label="时间">
            <u-input v-model="formData.active_time" placeholder="请选择时间 月、日" disabled :customStyle="inputStyle"
              @click="state.showDatePicker = true" />
            <template v-if="isSocietyManager">
              <u-picker v-model="state.showDatePicker" mode="time" confirm-color="#F4AF22" @confirm="onDateConfirm" />
            </template>
          </u-form-item>
        </view>
        <view class="card-grey">
          <u-form-item label="团建活动名称">
            <u-input v-model="formData.name" placeholder="请添加此次团建活动名称" :disabled="!isSocietyManager" :customStyle="inputStyle" />
          </u-form-item>
        </view>
        <view class="card-grey">
          <u-form-item label="活动目的">
            <u-input v-model="formData.purpose" placeholder="请添加此次活动目的" :disabled="!isSocietyManager" :customStyle="inputStyle" />
          </u-form-item>
        </view>
        <view class="card-grey">
          <u-form-item label="活动地点">
            <u-input v-model="formData.address" placeholder="请添加活动地点" :disabled="!isSocietyManager" :customStyle="inputStyle" />
          </u-form-item>
        </view>
        <view class="card-grey">
          <u-form-item label="参加人员">
            <u-input v-model="formData.participant" placeholder="请添加参加人员情况" :disabled="!isSocietyManager" :customStyle="inputStyle" />
          </u-form-item>
        </view>
        <view class="card-grey">
          <u-form-item label="人均预算">
            <u-input v-model="formData.capita_budget" placeholder="请添加人均预算" :disabled="!isSocietyManager" :customStyle="inputStyle" type="digit" />
          </u-form-item>
        </view>
        <view class="px-2">
          <u-form-item label="完成情况">
            <u-checkbox-group v-if="isSocietyManager" active-color="#F4AF22" shape="circle">
              <u-checkbox :modelValue="formData.status == 1" size="28" iconSize="20" labelSize="28" @change="onStatusChange('finish')">已完成</u-checkbox>
              <u-checkbox :modelValue="formData.status == 2" size="28" iconSize="20" labelSize="28" @change="onStatusChange('unfinish')">未完成</u-checkbox>
            </u-checkbox-group>
            <template v-else>
              <view v-if="formData.status == 1" class="text-28 c-#333">已完成</view>
              <view v-if="formData.status == 2" class="text-28 c-#333">未完成</view>
              <view v-else class="text-28 c-#333">待核实</view>
            </template>
          </u-form-item>
        </view>
      </u-form>
    </view>
    <view v-if="isSocietyManager" class="bottom-wrap-16 px-3.75 bg-white" @click="onSubmit">
      <view class="btn-primary">保存</view>
    </view> 
  </view>
</template>
<script setup>
import { showToast } from '@/common/util/uni';
import { refreshPrePage } from '@/common/util/util';
import { getTeamBuildDetail, postTeamBuildAdd, postTeamBuildEdit } from '@/common/http/module/plan'


import { usePlanStore } from '@/store/plan'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const planStore = usePlanStore()

const state = reactive({
  id: '',
  
  showDatePicker: false
})

const formData = reactive({
  active_time: '',
  name: '',
  purpose: '',
  address: '',
  participant: '',
  capita_budget: '',
  status: ''
})

const inputStyle = {
  fontSize: '28rpx',
  padding: '0'
}

const isSocietyManager = computed(() => userStore.isSocietyManager || userStore.isSocietyCreator)

function loadData() {
  if (!state.id )return
  getTeamBuildDetail(state.id).then(res => {
    const data = res.data
    formData.active_time = data.active_time
    formData.name = data.name
    formData.purpose = data.purpose
    formData.purpose = data.purpose
    formData.address = data.address
    formData.participant = data.participant
    formData.capita_budget = data.capita_budget
    formData.status = data.status
  })
}

function onDateConfirm(e) {
  console.log('onDateConfirm', e);
  const { year, month, day } = e
  formData.active_time = `${year}-${month}-${day}`
}

function onStatusChange(type) {
  const tmp = type == 'finish' ? 1: 2
  formData.status = formData.status == tmp ? '': tmp
}

function onSubmit() {
  const func = state.id ? postTeamBuildEdit: postTeamBuildAdd
  const params = { 
    ...formData,
    club_id: userStore.currentSocietyId,
    year: planStore.year,
  }
  if (state.id) {
    params.construction_id = state.id
  }

  func(params).then(() => {
    showToast('保存成功')
    refreshPrePage('refresh')
    setTimeout(() => uni.navigateBack(), 600);
  })
}

onLoad(options => {
  state.id = options.id
  loadData()
})
</script>

<style lang="scss" scoped>
.card-grey {
  margin-bottom: 20rpx;
  padding: 0 16rpx;
  border-radius: 12rpx;
  background-color: #F6F6F6;
  font-size: 28rpx;
}

:deep(.u-form-item) {
  padding: 0 !important;
}
</style>
